<template>
    <div class="chat-input">
        <input v-model="message" placeholder="Reply to Claude..." @keyup.enter="sendMessage" />

        <!-- 文件上传 -->
        <el-upload class="upload-btn" action="/api/upload/file" :show-file-list="false"
            :before-upload="beforeFileUpload" :on-success="handleSuccess" accept=".pdf,.doc,.docx,.xls,.xlsx">
            <el-button type="info" circle>
                <el-icon>
                    <Link />
                </el-icon>
            </el-button>
        </el-upload>

        <!-- 图片上传 -->
        <el-upload class="upload-btn" action="/api/upload/image" :show-file-list="false"
            :before-upload="beforeImageUpload" :on-success="handleSuccess" accept="image/*">
            <el-button type="primary" circle>
                <el-icon>
                    <Camera />
                </el-icon>
            </el-button>
        </el-upload>

        <button @click="sendMessage">Send</button>
    </div>
</template>

<script lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { Link, Camera } from '@element-plus/icons-vue';
import { useStore } from 'vuex'
const store = useStore()
const message = ref('')

// 类型定义
interface ChatMessage {
    id: number;
    text: string;
    sender: string;
    file?: {
        name: string;
        url: string;
        type: 'image' | 'file';
    };
}

export default {
    name: 'Input',
    components: { Link, Camera },
    setup() {
        const message = ref('');
        const messages = ref<ChatMessage[]>([]);

        // 图片上传校验
        const beforeImageUpload = (file: File) => {
            const isImage = file.type.startsWith('image/');
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isImage) {
                ElMessage.error('只能上传图片文件!');
                return false;
            }
            if (!isLt2M) {
                ElMessage.error('图片大小不能超过2MB!');
                return false;
            }
            return true;
        };

        // 文件上传校验
        const beforeFileUpload = (file: File) => {
            const allowedTypes = [
                'application/pdf',
                'application/msword',
                'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
            ];
            const isLt5M = file.size / 1024 / 1024 < 5;

            if (!allowedTypes.includes(file.type)) {
                ElMessage.error('仅支持PDF/Word文档!');
                return false;
            }
            if (!isLt5M) {
                ElMessage.error('文件大小不能超过5MB!');
                return false;
            }
            return true;
        };

        // 统一处理上传成功
        const handleSuccess = (response: any, file: File) => {
            const fileType = file.type.startsWith('image/') ? 'image' : 'file';

            messages.value.push({
                id: messages.value.length + 1,
                text: file.name,
                sender: 'User',
                file: {
                    name: file.name,
                    url: response.url,
                    type: fileType
                }
            });
        };
        // 发送消息
        const sendMessage = () => {
            /*
            if (message.value.trim()) {
                messages.value.push({
                    id: messages.value.length + 1,
                    text: message.value,
                    sender: 'User',
                });
                message.value = '';
            }*/
            if (message.value.trim()) {
                // 触发 Vuex action
                store.dispatch('sendMessage', message.value.trim())
                message.value = ''
            }
        };
        // 错误处理
        const handleError = () => {
            ElMessage.error('文件上传失败');
        };
        return {
            message,
            messages,
            sendMessage,
            beforeImageUpload,
            beforeFileUpload,
            handleSuccess
        };
    },
}
</script>

<style>
.chat-input {
    display: flex;
    padding: 10px;
    gap: 5px;
    align-items: center;
    background-color: #2d2d2d;
}

.upload-btn+.upload-btn {
    margin-left: 4px;
}

:deep(.el-upload) {
    margin-right: 0;
}

:deep(.el-button) {
    transition: all 0.3s ease;
}

:deep(.el-button--primary) {
    background-color: #409eff;
    border-color: #409eff;
}

:deep(.el-button--info) {
    background-color: #909399;
    border-color: #909399;
}

:deep(.el-button:hover) {
    opacity: 0.9;
    transform: scale(1.05);
}

.chat-input input {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    background-color: #444;
    color: white;
    transition: all 0.3s ease;
}

.chat-input input:focus {
    outline: none;
    border-color: #f5a623;
    box-shadow: 0 0 0 1px #f5a623;
}

.chat-input button[type='button'] {
    padding: 8px 16px;
    background-color: #f5a623;
    border-radius: 20px;
    font-weight: 500;
}

.chat-input button[type='button']:hover {
    background-color: #f39c12;
}

.chat-input button {
    padding: 8px 16px;
    background-color: #f5a623;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
}

.chat-input button:hover {
    background-color: #f39c12;
}
</style>